import './WJHdevice.scss'
import { useMount, useRequest } from 'ahooks'

import { WJHEncrypt } from './WJH'
import { Http } from '../../../../Common/Api'
import { WebCommonUrl } from '../../../../Common/Configure/CommonParameter'
import { useState } from 'react'

const List = [
    { uuid: 1, label: '压路机', value: 'A01', value2: 'A02', unit: '台', img: 'yaluji.png' },
    { uuid: 2, label: '摊铺机', value: 'B01', value2: 'B02', unit: '台', img: 'tanpuji.png' },
]

export const WJHdeviceA01 = ({ WJHEvent }) => {
    const [Number, setNumber] = useState(0)
    const [Data, setData] = useState({ A01: 0, A02: 0, B01: 0, B02: 0 })

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { total, compactorTotal, compactorOnlineCount, paverTotal, paverOnlineCount } = res.data
            setNumber(total)
            setData({ A01: compactorTotal, A02: compactorOnlineCount, B01: paverTotal, B02: paverOnlineCount })
        },
    })

    useMount(() => {
        runAsync({ url: 'getWJHgetDeviceStatistics' })
    })

    return (
        <div className="WJHdeviceA01">
            <div>
                设备总数 : <span>{Number} 台</span>
            </div>
            <div>
                {List.map(({ uuid, label, value, value2, unit, img }) => (
                    <div key={uuid}>
                        <img src={WebCommonUrl + img} alt="" />
                        <div>
                            <div>
                                <div>{label}</div>
                                <div>
                                    {Data[value]}
                                    {unit}
                                </div>
                            </div>
                            <div style={{ '--width': `${Data[value2] / Data[value] || 0}` }} />
                            <div>
                                <div>在线数</div>
                                <div>
                                    {Data[value2]}
                                    {unit}
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}
